import React, {useEffect} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  ActivityIndicator,
  FlatList,
  Image,
} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import AreaView from '../../components/Layout/AreaView';
import styles from './style';

const pageSize = 10;

const GuessGame = () => {
  const navigation = useNavigation();
  const [pageNumber, setPageNumber] = React.useState(1);
  const [newsData, setNewsData] = React.useState([1, 2, 3]);
  const [refreshing, setRefreshing] = React.useState(false);
  const [total, setTotal] = React.useState(0);
  useEffect(() => {
    navigation.setOptions({
      title: '竞猜游戏',
      headerRight: () => (
        <TouchableOpacity  activeOpacity={1} style={styles.chart_icon_container}>
          <View>
            <Image
              style={styles.chart_icon}
              source={require('../../assets/images/headIcon/chart_icon.png')}
            />
          </View>
        </TouchableOpacity>
      ),
    });
  }, [navigation]);

  const renderItem = ({item}) => {
    return (
      <View style={styles.list_container}>
        <Image
          style={styles.list_img}
          source={require('../../assets/images/headIcon/chart_icon.png')}
        />
        <View style={styles.content_container}>
          <Text style={styles.desc} numberOfLines={4}>
            课程简介老师简介课程简介老师简介课程简介老师简介课程简介老师简介课程简介老师简介课程简介老师简介师简介师简介师简介师简介师简介师简介师简介师简介师简
          </Text>
          <Text style={styles.pk}>已有374854人参与pk</Text>
          <TouchableOpacity  activeOpacity={1} style={styles.btn} activeOpacity={1}>
            <Text style={styles.btn_text}>参与</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  };
  React.useEffect(() => {
    const _fn = () => {
      setRefreshing(false);
    };
    _fn();
  }, [pageNumber, refreshing]);

  const onEndReached = () => {
    if (pageSize * pageNumber > total) {
      return false;
    }
    const num = pageNumber + 1;
    setPageNumber(num);
  };
  const onRefresh = () => {
    if (!refreshing) {
      setRefreshing(true);
      setPageNumber(1);
    }
  };
  return (
    <AreaView>
      <FlatList
        refreshing={refreshing}
        data={newsData}
        renderItem={renderItem}
        keyExtractor={(item) => item.courseId}
        onEndReachedThreshold={0.2}
        onEndReached={onEndReached}
        onRefresh={onRefresh}
        ListFooterComponent={() => (
          <View style={styles.footer_loading}>
            {pageNumber * pageSize > (total || 10) ? (
              <Text style={styles.footer_text}>---我是有底线的---</Text>
            ) : (
              <ActivityIndicator
                animating={false}
                color="#666"
                text="数据加载中......"
              />
            )}
          </View>
        )}
      />
    </AreaView>
  );
};

export default GuessGame;
